<template>
  <com-empty v-if="isEmpty && !isLoading" />

  <!-- 分类列表组件 -->
  <view v-else>
    <view class="list-type">
      <view @click="goTypeList(item._id, item.name)" class="item" v-for="item in dataList" :key="item._id">
        <image lazy-load class="image" :src="item.picurl" mode="scaleToFill" />
        <view class="label" v-show="compareTimestamp(item.updateTime)">
          <text>· {{ compareTimestamp(item.updateTime) }}前更新</text>
        </view>
        <view class="title">
          <text>{{ item.name }}</text>
        </view>
      </view>

      <view v-if="isHaveMore" @click="goType" class="item more">
        <image class="image" src="@/static/images/image_demo2.jpg" mode="scaleToFill" />
        <view class="title">
          <uni-icons type="more-filled" size="30" color="#ece2df"></uni-icons>
          <view class="text">更多</view>
        </view>
      </view>
    </view>
    <com-loadFooter :isHide="isHide" :isHasMore="isHasMore" :isLoading="isLoading"></com-loadFooter>
  </view>

</template>


<script lang="ts" setup>
import { compareTimestamp } from "@/utils/utils";

// 
const props = defineProps({
  // 数据列表
  dataList: {
    type: Array as any,
    default: () => []  // 返回空数组（默认无数据）
  },
  // 是否正在加载状态
  isLoading: {
    type: Boolean,
    default: false
  },
  // 数据是否为空
  isEmpty: {
    type: Boolean,
    default: true
  },
  // 是否还有更多数据
  isHasMore: {
    type: Boolean,
    default: true
  },
  // 是否显示更多的 item 容器
  isHaveMore: {
    type: Boolean,
    default: false
  },
  // 是否隐藏脚部栏
  isHide: {
    type: Boolean,
    default: false
  }
});

// 去到分类 Tabbar 页面
const goType = () => {
  uni.switchTab({
    url: "/pages/type/index"
  });
};

// 去到分类 列表 页面
const goTypeList = (id: string, name: string) => {
  uni.navigateTo({
    url: `/pages/pkgB/typeList/index?id=${id}&name=${name}`
  })
};

</script>


<style lang="scss" scoped>
@use "style.scss";
</style>